<template>
  <div class="homecomponent-container">
    <!-- 轮播图区域  以及  添加我的爱车区域 -->
    <div class="swiper">
      <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
      <!-- 添加我的爱车-->
      <div class="homecomponent-addcar">
        <!-- 添加我的爱车 左侧区域-->
        <div class="homecomponent-addcar-left">
          <img v-show="flag" src="../../images/huangguan-2.png" />
          <img v-show="!flag" :src="url" />
          <h1>{{title}}</h1>
        </div>
        <!-- 添加我的爱车 右侧区域-->
        <a class="click" @click="addCar">
          {{buttonText}}
          <span class="mui-icon mui-icon-arrowright"></span>
        </a>
      </div>
      <!-- 定位区域-->
      <div class="homecomponent-location">
        <router-link to="/home/location" class="homecomponent-location-a">
          <span class="mui-icon mui-icon-location"></span>
          <location></location>
          <!-- <span>{{currentCity}}</span> -->
          <span class="mui-icon mui-icon-arrowdown"></span>
        </router-link>
      </div>
    </div>

    <!-- 服务类型选择区域 -->
    <div class="service">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/selectService" @click.native="sendService('美容洗车')">
            <img src="../../images/icon-美容洗车.png" />
            <div class="mui-media-body">美容洗车</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/selectService" @click.native="sendService('保养养护')">
            <img src="../../images/icon-美容养护.png" />
            <div class="mui-media-body">保养养护</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/selectService" @click.native="sendService('轮胎服务')">
            <img src="../../images/icon-轮胎服务.png" />
            <div class="mui-media-body">轮胎服务</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/selectService" @click.native="sendService('钣金喷漆')">
            <img src="../../images/icon-钣金喷漆.png" />
            <div class="mui-media-body">钣金喷漆</div>
          </router-link>
        </li>
      </ul>
    </div>

    <!-- 这是轮播图 套餐卡区域-->
    <div class="card">
      <div class="card-header">
        <h1>套餐卡</h1>
      </div>
      <div class="card-footer">
        <div class="card-lunbo">
          <div class="card-item">
            <h1>开新洗护体验卡A</h1>
            <div class="card-item-price">
              <span class="card-item-top-nowprice">￥380</span>
              <del class="card-item-top-oldprice">￥678</del>
            </div>
            <div class="card-item-bottom">
              <h1>10次普通洗车+1次</h1>
              <!-- <mt-button type="primary" size="small">购买</mt-button> -->
              <div class="card-item-click">
                <a class="card-item-click-buy">购买</a>
              </div>
            </div>
          </div>
          <div class="card-item">
            <h1>开新洗护体验卡B</h1>
            <div class="card-item-price">
              <span class="card-item-top-nowprice">￥468</span>
              <del class="card-item-top-oldprice">￥733</del>
            </div>
            <div class="card-item-bottom">
              <h1>380元机油 4L</h1>
              <!-- <mt-button type="primary" size="small">购买</mt-button> -->
              <div class="card-item-click">
                <a class="card-item-click-buy">购买</a>
              </div>
            </div>
          </div>
          <div class="card-item">
            <h1>考拉精选美容洗护卡A</h1>
            <div class="card-item-price">
              <span class="card-item-top-nowprice">￥780</span>
              <del class="card-item-top-oldprice">￥1188</del>
            </div>
            <div class="card-item-bottom">
              <h1>20次普通洗车+1次</h1>
              <!-- <mt-button type="primary" size="small">购买</mt-button> -->
              <div class="card-item-click">
                <a class="card-item-click-buy">购买</a>
              </div>
            </div>
          </div>
          <div class="card-item">
            <h1>考拉超值保养养护卡B</h1>
            <div class="card-item-price">
              <span class="card-item-top-nowprice">￥1380</span>
              <del class="card-item-top-oldprice">￥2053</del>
            </div>
            <div class="card-item-bottom">
              <h1>10次普通洗车+1次</h1>
              <!-- <mt-button type="primary" size="small">购买</mt-button> -->
              <div class="card-item-click">
                <a class="card-item-click-buy">购买</a>
              </div>
            </div>
          </div>
          <div class="card-item">
            <h1>开新洗护体验卡A</h1>
            <div class="card-item-price">
              <span class="card-item-top-nowprice">￥380</span>
              <del class="card-item-top-oldprice">￥678</del>
            </div>
            <div class="card-item-bottom">
              <h1>10次普通洗车+1次</h1>
              <!-- <mt-button type="primary" size="small">购买</mt-button> -->
              <div class="card-item-click">
                <a class="card-item-click-buy">购买</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--热门推荐区域-->
    <div class="hot">
      <div class="hot-header">
        <h1>热门推荐</h1>
      </div>
      <div class="hot-card">
        <div class="card-item">
          <img src="../../images/tuijian1.jpg" />
          <p class="info">
            <span>普通洗水</span>
            <span class="info-price">￥35</span>
          </p>
        </div>
        <div class="card-item">
          <img src="../../images/tuijian2.jpg" />
          <p class="info">
            <span>内饰深度清洁</span>
            <span class="info-price">￥380</span>
          </p>
        </div>
        <div class="card-item">
          <img src="../../images/tuijian3.png" />
          <p class="info">
            <span>臭氧杀菌</span>
            <span class="info-price">￥98</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//导入轮播图组件
import swiper from "../subcomponents/swiper.vue";
//导入定位组件
import location from "../subcomponents/map.vue";
//导入mui的js文件
import "../../lib/mui/js/mui.min.js";
//导入默认的js文件
// import "../../comment.js";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      lunbotuList: [], // 保存轮播图数据
      hotList: [],
      flag: "",
      title: "",
      url: "",
      buttonText: ""
    };
  },
  mounted() {},
  created() {
    this.getLunbotu();
    this.getTestData();
  },
  computed: {
    ...mapState({
      currentCar: "car"
    }),
    ...mapState({
      currentServices: "services"
    }),
    ...mapState({
      currentCity: "city"
    })
  },
  activated() {
    this.changeImgTitle();
  },
  methods: {
    getLunbotu() {
      this.$http.get("api/getlunbo").then(result => {
        if (result.body.status === 0) {
          this.lunbotuList = result.body.message;
        }
      });
    },
    getTestData() {
      this.$http.get("/city.php").then(result => {
        //console.log(result);
        if (result.body.status === 0) {
          this.hotList = result.body.hotCities;
          //console.log(this.hotList);
        }
      });
    },
    addCar() {
      if (Object.keys(this.currentCar).length === 0) {
        this.$router.push("/home/addCar");
      } else {
        this.$router.push("/home/userCar");
      }
    },
    changeImgTitle() {
      if (Object.keys(this.currentCar).length !== 0) {
        this.currentCar.some((item, index) => {
          if (item.imgActive) {
            i = index;
            return true;
          }
        });
        this.flag = false;
        this.title = this.currentCar[i].name + " - " + this.currentCar[i].carCc;
        this.url = this.currentCar[i].url;
        this.buttonText = "我的爱车";
      } else {
        this.flag = true;
        this.title = "请添加我的爱车";
        this.buttonText = "添加爱车";
      }
    },
    sendService(e) {
      this.$store.commit("getClickService", e);
    }
  },
  components: {
    swiper,
    location
  }
};
</script>


<style lang="scss" scoped>
// * {
//   touch-action: pan-y;
// }
.homecomponent-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .swiper {
    height: 170px;
    //position: relative;
    .homecomponent-location {
      width: 98.5px;
      height: 30px;
      font-size: 12px;
      color: white;
      background-color: black;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 25px;
      position: absolute;
      right: 5%;
      top: 5%;
      padding: 5px;
      .homecomponent-location-a {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        h1 {
          font-size: 12px;
          margin: 0;
        }
        .mui-icon {
          font-size: 16px;
        }
      }
    }
    .homecomponent-addcar {
      width: 90%;
      height: 45px;
      background-color: white;
      border-radius: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      position: relative;
      left: 5%;
      top: -20px;
      // box-shadow: 0 0 8px #ccc;
      .homecomponent-addcar-left {
        display: flex;
        align-items: center;
      }
      h1 {
        font-size: 13px;
        margin-left: 10px;
      }
      .click {
        margin-right: 10px;
        color: #999999;
      }
      .mui-icon-arrowright {
        font-size: 17px;
      }
      img {
        width: 30px;
        margin-left: 10px;
      }
    }
  }
  .service {
    //height: 98px;
    .mui-grid-view.mui-grid-9 {
      width: 90%;
      height: 98px;
      margin-top: 42px;
      left: 5%;
      background-color: white;
      display: flex;
      border-radius: 25px;
      .mui-table-view-cell > a:not(.mui-btn) {
      }
      .mui-table-view-cell {
        border: 0;
        padding: 0;
      }
      img {
        width: 44px;
        height: 44px;
        margin-top: 16px;
      }
      .mui-media-body {
        font-size: 12px;
        color: #333333;
        margin: 0;
      }
    }
  }

  .card {
    width: 90%;
    height: 250px;
    background-color: white;
    border-radius: 25px;
    left: 5%;
    position: relative;
    margin-top: 25px;
    .card-header {
      // width: 90%;
      // left: 10px;
      position: relative;
      top: 15px;
      h1 {
        font-size: 20px;
        margin-left: 15px;
        // left: 5%;
        // position: relative;
      }
    }
    .card-footer {
      // width: 90%;
      height: 190px;
      background-color: #fff;
      // left: 5%;
      position: relative;
      top: 10px;
      .card-lunbo {
        width: 90%;
        // height: 150px;
        // background-color: red;
        margin-left: 15px;
        // left: 5%;
        position: relative;
        display: flex;
        overflow: scroll;
        overflow-y: hidden;
        top: 20px;
        .card-item {
          width: 100px;
          height: 143px;
          text-align: center;
          border: 1px solid blue;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          background-color: #293d7a;
          color: white;
          margin-right: 10px;
          margin-bottom: 25px;
          .card-item-price {
            width: 100px;
            // display: flex;
            margin-bottom: 10px;
            .card-item-top-nowprice {
              font-size: 16px;
              font-weight: bold;
            }
            .card-item-top-oldprice {
              font-size: 10px;
            }
          }
          .card-item-bottom {
            background-color: white;
            border-radius: 0 0 5px 5px;
            h1 {
              font-size: 12px;
              color: black;
              padding: 0;
              margin: 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin: 10px;
            }
          }
          h1 {
            font-size: 12px;
            margin: 10px;
          }
          .card-item-click {
            width: 60%;
            border-radius: 25px;
            background-color: #293d7a;
            left: 20%;
            margin-bottom: 10px;
            position: relative;
            font-size: 12px;
            .card-item-click-buy {
              color: white;
            }
          }
        }
      }
    }
  }
  .hot {
    width: 90%;
    background-color: #fff;
    left: 5%;
    position: relative;
    margin-top: 25px;
    border-radius: 25px;
    .hot-header {
      top: 15px;
      position: relative;
      h1 {
        font-size: 20px;
        margin-left: 15px;
      }
    }
    .hot-card {
      display: flex;
      flex-wrap: wrap;
      padding: 15px;
      // flex-direction: row !important;
      justify-content: space-between;
      position: relative;
      top: 10px;
      .card-item {
        .info {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: black;
          .info-price {
            color: red;
            font-weight: bold;
          }
        }
      }
      img {
        width: 145px;
      }
    }
  }
}
.card-lunbo::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  // border-radius: 50%;
  // display: none;
}
.card-lunbo::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.card-lunbo::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
}
// html,
// body {
//   overflow-y: scroll;
// }
// html,
// body {
//   overflow: scroll;
//   min-height: 101%;
// }
// html {
//   overflow: -moz-scrollbars-vertical;
// }
</style>
